<template>
    <div class="base">
        <button v-on:click="troggle()">
            Toggle
        </button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
        <!-- slide -->
        <button @click="show2 = !show2">
            Toggle render
        </button>
        <transition name="slide-fade">
            <p v-if="show2">hello</p>
        </transition>
        <p>先出后进</p>
        <p>
            <button @click="doc">
                点击 {{docState}}
            </button>
        </p>
        <transition name="slide-fade2" mode="out-in">
            <button v-if="docState === 'saved'" key="saved">
                saved
            </button>
            <button v-if="docState === 'Edit'" key="edit">
                Edit
            </button>
        </transition>
        <p>列表过渡</p>
        <div id="list-demo" class="demo">
            <button v-on:click="add">Add</button>
            <button v-on:click="remove">Remove</button>
            <transition-group name="list" tag="p">
                <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
            </transition-group>
        </div>
        <p>********************************</p>
        <button v-on:click="ts()">切换</button>
        <transition name="list">
            <div v-if="t" style="width:100px;height:100px;background:red;">
                你好呀，how are you !!
            </div>
        </transition>
    </div>
</template>
<script>
export default {
    name: 'base',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            show: true,
            show2: true,
            docState: 'saved',
            items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            nextNum: 10,
            t: true
        }
    },
    methods: {
        troggle() {
            this.show = !this.show
        },
        ts() {
            this.t = !this.t;
        },
        doc() {
            switch (this.docState) {
                case 'Edit':
                    this.docState = 'saved';
                    break;
                case 'saved':
                    this.docState = 'Edit';
                    break;
            }
        },
        randomIndex: function() {
            return Math.floor(Math.random() * this.items.length)
        },
        add: function() {
            this.items.splice(this.randomIndex(), 0, this.nextNum++)
        },
        remove: function() {
            this.items.splice(this.randomIndex(), 1)
        },
    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s
}

.fade-enter,
.fade-leave-active {
    opacity: 0
}


/* 可以设置不同的进入和离开动画 */


/* 设置持续时间和动画函数 */

.slide-fade-enter-active {
    transition: all .3s ease;
}

.slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}


/*进入之前*/

.slide-fade-enter {
    transform: translateX(-10px);
    opacity: 0;
}


/*退出之后*/

.slide-fade-leave-active {
    transform: translateX(10px);
    opacity: 0;
}


/* 可以设置不同的进入和离开动画 */


/* 设置持续时间和动画函数 */

.slide-fade2-enter-active {
    transition: all .3s ease;
}

.slide-fade2-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}


/*进入之前*/

.slide-fade2-enter {
    transform: translateX(-100px);
    opacity: 0;
}


/*退出之后*/

.slide-fade2-leave-active {
    transform: translateX(100px);
    opacity: 0;
}


/*列表炒作*/

.list-item {
    display: inline-block;
    margin-right: 10px;
}

.list-enter-active,
.list-leave-active {
    transition: all 1s;
}

.list-enter {
    opacity: 0;
    transform: translateY(30px);
}

.list-leave-active {
    opacity: 0;
    transform: translateY(-30px);
}

.page-enter-active {
    transition: transform 1s;
    transform: translateX(0);
}

.page-enter {
    transform: translateX(100%);
}

.page-leave-active {
    transform: transform 1s;
    transform: translateX(-100%);
}

.page-leave {
    transform: translateX(0);
}
</style>
